<template>
  <view>
    <view class="user-name">{{content[3]}}</view>
    <view class="name-ff">
        <view>福气值</view>
        <view class="ff-content"><text style="font-size: 55rpx;margin-right: 8rpx;">{{content[1]}}</text>分</view>
    </view>
    <view class="content">
       
        <view class="items" v-for="item in 3">
            <view class="xs">{{content[0][1][item]}}</view>
            <view class="xs-info">
                <view class="info-title">拼音</view>
                <view class="info-body">{{(content[0][2][item]).split("、")[0]}}</view>
            </view>
            <view class="xs-info">
                <view class="info-title">笔画</view>
                <view class="info-body">{{content[0][3][item]}}</view>
            </view>
            <view class="xs-info">
                <view class="info-title">五行</view>
                <view class="info-body">{{content[0][4][item]}}</view>
            </view>
        </view>
        <view class="tip-title"></view>
        <view class="tip-info">
            {{content[2]}}
        </view>

    </view>

    <view class="age" @click="reCommit"></view>

    <image
        class="tip"
        src="http://img-miniprogram-o.doutuimao.net/miniadmin/programconfig/xcximg/20240207/32d033831817facdf2bd1affb85934f0.png"
        mode="widthFix"
      ></image>

  </view>
</template>

<script setup lang="ts">
import { EnumStatus } from "@/utils/constants";
interface IProps {
    content:any
}
const props = withDefaults(defineProps<IProps>(), {})
const emit = defineEmits(['update:defStatus'])
const reCommit =()=>{
emit('update:defStatus',EnumStatus.STATUS)
}

</script>

<style lang="scss" scoped>

    .user-name{
        position: absolute;
        z-index: 99;
        top: 28%;
        left: 25%;
        font-size: 50rpx;
    }
    .name-ff{
        position: absolute;
        z-index: 99;
        top: 26%;
        right: 19%;
        .ff-content{
            color: rgb(203,114,0);
            font-size: 28rpx;
        }
    }
   .age{
        position: absolute;
        z-index: 99;
        top: 89%;
        height: 100rpx;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        width: 40%;
        left: 30%;
        background-image: url('http://img-miniprogram-o.doutuimao.net/miniadmin/programconfig/xcximg/20230726/5edcf1b677da0153ddc5c1ab70dc8ccc.png');
        background-size: 100% 100%;
    }
    .tip{
        z-index: 102;
        position: absolute;
        top: 81%;
        right: 15%;
        width: 60%;
    }
    .content{
        position: absolute;
        z-index: 99;
        top: 37%;
        height: 50%;
        width: 80.8%;
        left: 9%;
        color: rgb(203,114,0);
        background: rgb(255,252,237);
        border: 7rpx solid rgb(63,39,39) ;
        border-top: none;
        // justify-content: center;
        // align-items: center;
        .items{
            display: flex;
            justify-content: space-between;
            padding:0 5%;
            width: 90%;
            margin-bottom: 20rpx;
            .xs{
                width: 100rpx;
                height: 100rpx;
                background-image: url("http://img-miniprogram-o.doutuimao.net/miniadmin/programconfig/xcximg/20230726/7f6c467b482deff71591f1141bf62253.png");
                background-size: 100% 100%;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .xs-info{
                width: 100rpx;
                height: 100rpx;
                text-align: center;
                .info-title{
                    font-size: 23rpx;
                    color: black;
                    background-color: rgb(250,231,199);
                    padding: 8rpx 0;
                    border-radius: 8rpx;
                }
                .info-body{
                    font-size: 28rpx;
                    margin-top: 15rpx;
                }
            }
        }
        .tip-title{
            width: 50%;
            margin: 7% auto;
            height: 70rpx;
            background-image: url("http://img-miniprogram-o.doutuimao.net/miniadmin/programconfig/xcximg/20230726/7ec797a09160d4961d19b63c8aa3c34e.png");
            background-size: 100% 100%;
        }
        .tip-info{
            margin: 20rpx;
            font-size: 28rpx;
        }
    }
</style>
